
<div class="container">
  <!DOCTYPE html>
<html lang="zh-cn">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">




<title>Html | Miles`s</title>

<link rel="stylesheet" href="https://mada.gitee.io/notes//css/styles.css">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" 
integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/zenburn.min.css" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js" integrity="sha256-/BfiIkHlHoVihZdc6TFuj7MmJ0TWcWsMXkeDFwhi0zw=" crossorigin="anonymous"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="https://mada.gitee.io/notes//js/highlight.js"></script>






  <div class="container">
    <nav class="navbar level">
      <div class="navbar-brand">
          <a class="nav-item" href="https://mada.gitee.io/notes/"><h1 class="title is-3">Miles`s</h1></a>
      </div>           
      <div class="navbar-menu has-text-centered is-active">
          <div class="navbar-end is-centered">
              
           </div>
      </div>
    </nav>
  </div>
  <main class="container">
      
      
      <h1 class="title is-3">2016</h1>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Nov 28</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/web%E4%B8%8A%E4%BC%A0/">Web上传</a></h1>
          <div class="content is-hidden-mobile">
            web上传的实现方式
表单提交上传 普通表单提交与上传表单提交区别 普通表单
&lt;form action=&quot;/&quot; &gt; &lt;input type=&quot;text&quot; name=&quot;name&quot;&gt;&lt;/input&gt; &lt;input type=&quot;text&quot; name=&quot;age&quot;&gt;&lt;/input&gt; &lt;button type=&quot;submit&quot;&gt;确定&lt;/button&gt; &lt;/form&gt;  上传表单
&lt;form action=&quot;/upload&quot; method=&quot;post&quot; enctype=&quot;multipart/form-data&quot;&gt; …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/web%E4%B8%8A%E4%BC%A0/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Nov 14</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/%E5%93%8D%E5%BA%94%E5%BC%8Fweb%E5%BC%80%E5%8F%91/">响应式Web开发</a></h1>
          <div class="content is-hidden-mobile">
            视觉稿 视觉稿：PSD，效果图等。
 选取一款手机的屏幕宽高作为基准（5s，6s等） 对于retina屏幕（dpr＝2），为了达到高清效果，视觉稿的画布大小会是基准的2倍。  术语 物理像素(physical pixel)
一个物理像素是显示器（手机屏幕）上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和高度值。
设备独立像素（density-independent pixel）
设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素（比如：css像素），然后由相关系统转换为物理像素。
设备像素比（device pixel ratio）
定义了物理像素和设备独立像素的对应关系，它的值可以按如下公式得到：
设备像素比 ＝ 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
在JavaScript中，可 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/%E5%93%8D%E5%BA%94%E5%BC%8Fweb%E5%BC%80%E5%8F%91/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Jun 21</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/%E7%B2%BE%E9%80%9Acss%E4%B8%8Ehtml%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">精通CSS与HTML设计模式</a></h1>
          <div class="content is-hidden-mobile">
            2014-12-22 第一章：轻松搞定CSS  设计模式&ndash;精心组织的解决方案
 常用功能的组合 模式的名字，要解决的问题，解决方案和各方面的权衡。  1.2 使用设计模式  通过把45种常见的CSs属性与4种元素（内联，内联块状，块状和表格）和5种定位方法（静态，相对，绝对，固定，浮动）结合创建。 强大威力：很容易利用基础的模式并将它们组合来构造出更加复杂的模式。 background：CSS内建的设计模式。 绝对定位(absolute)：相对另外一个元素从新定位。 文本替换（Text Replacement）：文本藏在图片的后面。这样一来，图片下载失败，可以显示文字。 左外边距（Left Marginal）：个或多个元素移出块状元素。可以使标题放在左边，内容放在右边。 外边距图片字母下沉（Marginal Graphic Dropcap）：块状元素的左边距里创建一个图形化的首 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/%E7%B2%BE%E9%80%9Acss%E4%B8%8Ehtml%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      <article class="columns">
        <div class="column is-2">
          <h6 class="is-inline" style="white-space: nowrap">Jun 21</h2>
        </div>
        <div class="column">
          <h2 class="subtitle is-inline is-size-4-mobile is-size-3-desktop"><a href="https://mada.gitee.io/notes/posts/html5-canvas/">HTML5 Canvas核心技术 图形，动画与游戏开发</a></h1>
          <div class="content is-hidden-mobile">
            HTML5 Canvas核心技术 图形，动画与游戏开发 canvas 基础 Note:
 canvas只有两个属性 width 和 height 在设置canvas的宽度和高度时，不能使用px后缀 默认的canvas元素大小是300*150个屏幕像素 通过width，height属性设置和css设置并不一样。  canvas元素实际上有两套尺寸，一个是元素本身的大小，还有一个是元素绘画表面（drawing surface）的大小。 当设置元素的width和height属性时，实际上是同时修改了该元素本身的大小与绘图表面的大小。 用css设置只会改变元素的大小。 设置了css大小，浏览器会对绘图表面进行缩放，使其符合元素的大小。   canvas元素的api  width：元素与绘图表面宽度，非负整数。 height：元素与绘图表面高度，非负整数。 getContext():返回相关的绘图环 …
            
            <br>
            <a class="button is-marginless is-paddingless" href="https://mada.gitee.io/notes/posts/html5-canvas/">
            <span class="icon-link is-small" style="line-height: 100%">
                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
              </span>
              <p style="padding:0 5px"></p>more</p>
            </a>
            
          </div>
      </article>
      
      
      
  </main>
  <section class="section">
  <div class="container">
    <nav class="level is-mobile">
      <div class="level-left">
        <div class="level-item">
          
          <a class="button is-rounded" disabled>
            <span class="icon is-small is-marginless">
              <i class="fa fa-angle-left"></i>
            </span>
            上一页
          </a>
          
        </div>
      </div>
      <div class="level-right is-marginless">
        <div class="level-item">
          
          <a class="button is-rounded" disabled>
            下一页
            <span class="icon is-small is-marginless">
              <i class="fa fa-angle-right"></i>
            </span>
          </a>
          
        </div>
      </div>
    </nav>
  </div>
</section>

  <section class="section">
  <div class="container has-text-centered">
    <p></p>
  </div>
</section>


</div>